<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Device</title>
</head>
<canvas id="phone-screen"></canvas>
<script src="js/socket.io-1.4.5.js"></script>

<br>
<button id="sub">开始使用设备</button>
<button id="wait">暂停使用设备</button>
<button id="notify">恢复使用设备</button>
<button id="unsub">停止使用设备</button>
<br>
<button id="devices">DEVICES</button>
<button id="back">返回键</button>
<button id="home" >home键</button>
<button id="menu">菜单键</button>
<button id="appSwitch">切换app</button>
<button id="camera">拍照键</button>
<button id="power">电源键</button>
<!--<button id="notification">通知键</button>-->
<!--<button id="search">搜索键</button>-->
<br>
<button id="openSettings">打开系统设置</button>
<button id="openDeveloperSettings">打开开发者选项</button>
<button id="openManageApps">打开应用管理</button>
<button id="openRunningApps">打开运行应用</button>
<button id="openDeviceInfo">打开设备信息</button>
<button id="openDisplaySettings">打开显示设置</button>
<button id="openLocaleSettings">打开语言设置</button>
<button id="openIMESettings">打开IME设置</button>
<button id="openWiFiSettings">打开WIFI设置</button>
<br>
<button id="openBaidu">输入地址打开浏览器</button>
<br>

<button id="shell">shell命令</button><input type="text" id="shell_text" />
结果：<input type="text" id="shell_result" />
<br>
<input type="text" id="text" />
<button id="send">输入</button>
<button id="del">回退删除</button>
<br>
<button id="rotation90">横屏</button>
<button id="rotation0">竖屏</button>
<br>
<button id="restartAgentApk">重启Agent Apk</button>
<br>
<button id="browserApps">浏览器应用</button>
<button id="deviceInfo">设备信息</button>
<br>
<button id="wake">唤醒</button>
<button id="unlock">键盘锁解锁</button>
<button id="lock">键盘锁锁定</button>
<input type="text" id="clipboard_text" />
<button id="clipboard">剪切板</button>
<br>
<button id="debugStart">启动debug</button>
<button id="debugStop">关闭debug</button>
<br>
<canvas id="screenshot_canvas"></canvas>
<button id="screenshot">截图</button>


<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.jsonp.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-notify.min.js"></script>
<script src="js/keyeventConvert.js"></script>
<script src="js/encoding-indexes.js"></script>
<script src="js/encoding.js"></script>

<script>
/*jshint browser:true*/
var util = {
    setMinicapScale:function (scale) {
        localStorage.setItem("minicap_scale", scale);
    },
    getMinicapScale:function () {
        return localStorage.getItem("minicap_scale");
    },
    setMinicapRotate:function (rotate) {
        localStorage.setItem("minicap_rotate", rotate);
    },
    getMinicapRotate:function () {
        return localStorage.getItem("minicap_rotate");
    },
    isRotate: false,
    screenW: 1080,
    screenH: 1920,
    scala: 0.5,
}
var BLANK_IMG =
  ''

var canvas = document.getElementById('phone-screen')
  , g = canvas.getContext('2d')
var token = "eyJhbGciOiJIUzI1NiIsInppcCI6IkRFRiJ9.eNpMjsEKwkAMRP8l511ottk02__wJFLSdoUVrdJuQRD_3QgevAxD5jGZF2z7CD3ofCsLONi3vA5ltsthwNgkNKEYqRMWZAOmNWvNBmDkwCwSKAVxsE33R4b-eHKQn49fnDoO5KBo_eeNWHS8fkvqumcHl1rsYTq31JIkP6GIN8NeNKifmQltAWoT4f0BAAD__w.f2rH4QRvp1opJQC0yPUDDaPa7fIk0fevhZUeaZGkJ1w";
var socket = io('http://127.0.0.1:9092?type=browser&token=' + token);

var deviceId = '3419953f9905';

socket.on('connect', function(){
    util.serverConnected = true
});
socket.on('devices', function(message){
    var device = message
    console.log(device)
    util.screenW = parseFloat(device.width)
    util.screenH = parseFloat(device.height)
});
socket.on('minicap', function(message){
    var blob = new Blob([message], {type: 'image/jpeg'})
    var URL = window.URL || window.webkitURL
    var img = new Image()
    img.src = URL.createObjectURL(blob);
    img.onload = function() {
        canvas.width = img.width * util.scala
        canvas.height = img.height * util.scala
        g.drawImage(img, 0, 0, img.width * util.scala, img.height * util.scala)
        img.onload = null
        img.src = BLANK_IMG
        img = null
        u = null
        blob = null
    }
});
socket.on('disconnect', function(){
    util.serverConnected = false;
});
socket.on('remote_debug_start', function(message){
    console.log(message)
});
socket.on('remote_debug_stop', function(message){
    console.log(message)
});
socket.on('display', function(message){
    console.log(message)
});
socket.on('battery', function(message){
    console.log(message)
});
socket.on('browser_app', function(message){
    console.log(message)
});
socket.on('shell', function(message){
    console.log(message)
    $("#shell_result").val(message);
});
socket.on('stfagent_success', function(message){
    console.log(message)
});
socket.on('screenshot', function(message){
    var blob = new Blob([message], {type: 'image/jpeg'})
    var URL = window.URL || window.webkitURL
    var img = new Image()
    img.src = URL.createObjectURL(blob);
    var screen_canvas = document.getElementById('screenshot_canvas')
        , screen_g = screen_canvas.getContext('2d')
    img.onload = function() {
        screen_canvas.width = img.width * util.scala
        screen_canvas.height = img.height * util.scala
        screen_g.drawImage(img, 0, 0, img.width * util.scala, img.height * util.scala)
        img.onload = null
        img.src = BLANK_IMG
        img = null
        u = null
        blob = null
    }
});

var isDown = false;

// 获取鼠标在html中的绝对位置
function mouseCoords(event){
    if(event.pageX || event.pageY){
        return {x:event.pageX, y:event.pageY};
    }
    return{
        x:event.clientX + document.body.scrollLeft - document.body.clientLeft,
        y:event.clientY + document.body.scrollTop - document.body.clientTop
    };
}
// 获取鼠标在控件的相对位置
function getXAndY(control, event){
    //鼠标点击的绝对位置
    Ev= event || window.event;
    var mousePos = mouseCoords(event);
    var x = mousePos.x;
    var y = mousePos.y;

    //获取div在body中的绝对位置
    var x1 = control.offsetLeft;
    var y1 = control.offsetTop;

    //鼠标点击位置相对于div的坐标
    var x2 = x - x1;
    var y2 = y - y1;
    return {x:x2,y:y2};
}

function pressKey(value) {
    var params = {
        deviceId: deviceId,
        keyCode: value
    }

    socket.emit("press_key", JSON.stringify(params))
}

function openSysSetting(value) {
    var params = {
        deviceId: deviceId,
        name: value
    }

    socket.emit("open_sys_setting", JSON.stringify(params))
}
function sendUrl(url) {
    var params = {
        deviceId: deviceId,
        url: url
    }
    socket.emit("web", JSON.stringify(params))
}
function sendShell(cmd) {
    var params = {
        deviceId: deviceId,
        cmd: cmd
    }
    socket.emit("shell", JSON.stringify(params))
}

function sendTouchEvent(minitouchStr) {
    var params = {
        deviceId: deviceId,
        cmd: minitouchStr
    }
    socket.emit("touch", JSON.stringify(params))
}
function sendInputText(text) {
    var params = {
        deviceId: deviceId,
        input: text
    }
    socket.emit("input", JSON.stringify(params))
}

function subScreen() {
    console.log("subScreen")
    socket.emit("sub_screen", deviceId)
}
function waitScreen() {
    console.log("wait")
    socket.emit("wait_screen", deviceId)
}
function notifyScreen() {
    console.log("notify")
    socket.emit("notify_screen", deviceId)
}
function unsubScreen() {
    console.log("unsub")
    socket.emit("unsub_screen", deviceId)
}
function debugStart() {
    console.log("debugStart")
    socket.emit("remote_debug_start", deviceId)
}
function debugStop() {
    console.log("debugStop")
    socket.emit("remote_debug_stop", deviceId)
}
function rotation(value) {
    console.log("rotation " + value)
    var params = {
        deviceId: deviceId,
        rotation: value,
        isLock: false
    }
    socket.emit("set_rotation", JSON.stringify(params))
}
function wake() {
    console.log("wake ")
    var params = {
        deviceId: deviceId,
    }
    socket.emit("set_wake", JSON.stringify(params))
}
function clipboard(value) {
    console.log("clipboard " + value)
    var params = {
        deviceId: deviceId,
        text: value
    }
    socket.emit("set_clipboard", JSON.stringify(params))
}
function keyguard(value) {
    console.log("set_keyguard_status " + value)
    var params = {
        deviceId: deviceId,
        status: value
    }
    socket.emit("set_keyguard_status", JSON.stringify(params))
}

function getDevices() {
    console.log("devices")
    socket.emit("get_devices", deviceId)
}

function sendDown(argx, argy, isRo) {
    var scalex = util.screenW / canvas.width;
    var scaley = util.screenH / canvas.height;
    var x = argx, y = argy;
//    if (isRo) {
//        x = (canvas.height - argy) * (canvas.width / canvas.height);
//        y = argx * (canvas.height / canvas.width);
//    }
    x = Math.round(x * scalex);
    y = Math.round(y * scaley);
    var command = "d 0 " + x + " " + y + " 50\n";
    command += "c\n";
    console.log("command: " + command)
    sendTouchEvent(command);
}

function sendMove(argx, argy, isRo) {
    var scalex = util.screenW / canvas.width;
    var scaley = util.screenH / canvas.height;
    var x = argx, y = argy;
    if (isRo) {
        x = (canvas.height - argy) * (canvas.width / canvas.height);
        y = argx * (canvas.height / canvas.width);
    }
    x = Math.round(x * scalex);
    y = Math.round(y * scaley);

    var command = "m 0 " + x + " " + y + " 50\n";
    command += "c\n";
    console.log("command: " + command)
    sendTouchEvent(command);
}

function sendUp() {
    var command = "u 0\n";
    command += "c\n";
    sendTouchEvent(command);
}

canvas.onmousedown = function (event) {
    if (!util.serverConnected) {
        return;
    }
    isDown = true;
    var pos = getXAndY(canvas, event);
    sendDown(pos.x, pos.y, util.isRotate);
};

canvas.onmousemove = function (event) {
    if (!util.serverConnected || !isDown) {
        return;
    }
    var pos = getXAndY(canvas, event);
    sendMove(pos.x, pos.y, util.isRotate);
};

canvas.onmouseover = function (event) {
    console.log("onmouseover");
};

canvas.onmouseout = function (event) {
    if (!util.serverConnected || !isDown) {
        return;
    }
    isDown = false;
    sendUp();
};

canvas.onmouseup = function (event) {
    if (!util.serverConnected || !isDown) {
        return;
    }
    isDown = false;
    sendUp();
};

$("#back").click(function () {
    pressKey(4);
})
$("#home").click(function () {
    pressKey(3);
})
$("#menu").click(function () {
    pressKey(82);
})
$("#appSwitch").click(function () {
    pressKey(187);
})
$("#del").click(function () {
    pressKey(67);
})
$("#camera").click(function () {
    pressKey(27);
})
$("#power").click(function () {
    pressKey(26);
})
$("#openSettings").click(function () {
    openSysSetting("SYS");
})
$("#openDeveloperSettings").click(function () {
    openSysSetting("DEVELOPER");
})
$("#openManageApps").click(function () {
    openSysSetting("MANAGE_APPS");
})
$("#openRunningApps").click(function () {
    openSysSetting("RUNNING_APPS");
})
$("#openDeviceInfo").click(function () {
    openSysSetting("DEVICE_INFO");
})
$("#openDisplaySettings").click(function () {
    openSysSetting("DISPLAY");
})
$("#openLocaleSettings").click(function () {
    openSysSetting("LOCALE");
})
$("#openIMESettings").click(function () {
    openSysSetting("IME");
})
$("#openWiFiSettings").click(function () {
    openSysSetting("WIFI");
})
$("#notification").click(function () {
    pressKey(83);
})
$("#search").click(function () {
    pressKey(84);
})

$("#send").click(function () {
    var text = $("#text").val()
    sendInputText(text);
})

$("#sub").click(function () {
    subScreen();
});

$("#wait").click(function () {
    waitScreen();
});

$("#notify").click(function () {
    notifyScreen();
});

$("#unsub").click(function () {
    unsubScreen();
});
$("#devices").click(function () {
    getDevices();
});

$("#openBaidu").click(function () {
    var url = "https://www.baidu.com"
    sendUrl(url);
})
$("#shell").click(function () {
    //var cmd = "getprop ro.build.version.sdk"
    var cmd = $("#shell_text").val();
    sendShell(cmd);
})
$("#debugStart").click(function () {
    debugStart();
})
$("#debugStop").click(function () {
    debugStop();
})
$("#rotation90").click(function () {
    rotation(90);
})
$("#rotation0").click(function () {
    rotation(0);
})
$("#wake").click(function () {
    wake();
})
$("#clipboard").click(function () {
    var text = $("#clipboard_text").val();
    clipboard(text);
})
$("#unlock").click(function () {
    keyguard(false);
})
$("#lock").click(function () {
    keyguard(true);
})


$("#browserApps").click(function () {
    socket.emit("browser_app", deviceId)
})
$("#deviceInfo").click(function () {
    socket.emit("device_info", deviceId)
})
$("#screenshot").click(function () {
    socket.emit("screenshot", deviceId)
})
$("#restartAgentApk").click(function () {
    socket.emit("restart_agent_apk", deviceId)
})

</script>

</body>
</html>